.custom-drag-resize {
    position: absolute;
    box-sizing: border-box;
    z-index: 10;
    >:first-child {
        width: 100%;
        height: 100%;
    }
    .vdr-stick {
        box-sizing: border-box;
        position: absolute;
        font-size: 1px;
        background: #ffffff;
        border: 1px solid $theme-color;
        box-shadow: 0 0 2px $theme-color;
        $stick-size: 8px;
        $stick-offset: -$stick-size / 2;
        width: $stick-size;
        height: $stick-size;
        &-tl {
            cursor: nwse-resize;
            top: $stick-offset;
            left: $stick-offset;
        }
        &-tm {
            cursor: ns-resize;
            left: 50%;
            top: $stick-offset;
            margin-left: $stick-offset;
        }
        &-tr {
            cursor: nesw-resize;
            right: $stick-offset;
            top: $stick-offset;
        }
        &-mr {
            cursor: ew-resize;
            right: $stick-offset;
            margin-top: $stick-offset;
            top: 50%;
        }
        &-br {
            cursor: nwse-resize; 
            right: $stick-offset;
            bottom: $stick-offset;
        }
        &-bm {
            cursor: ns-resize;
            left: 50%;
            bottom: $stick-offset;
        }
        &-bl {
            cursor: nesw-resize;
            left: $stick-offset;
            bottom: $stick-offset;
        }
        &-ml {
            cursor: ew-resize;
            top: 50%;
            left: $stick-offset;
            margin-top: $stick-offset;
        }
    }
    .not-resizable {
        display: none;
    }
}
.custom-drag-resize.active:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    outline: 1px dashed $theme-color;
}